<template>
  <div style="min-height: 100vh; background: linear-gradient(135deg, #232526 0%, #414345 100%); display: flex; flex-direction: column; align-items: center; justify-content: flex-start;">
    <div style="margin-top: 40px; margin-bottom: 24px; text-align: center;">
      <h2 style="color: #fff; font-size: 2.2rem; font-weight: bold; letter-spacing: 2px; margin-bottom: 8px; text-shadow: 0 2px 8px #0008;">远程串流演示</h2>
      <div style="color: #bbb; font-size: 1.1rem;">请输入被控端IP后再选择推流窗口</div>
      <div style="margin-top: 16px;">
        <select v-model="backendIp" @change="onIpSelect" style="padding: 6px 16px; border-radius: 6px; border: 1px solid #888; font-size: 1rem; width: 240px; margin-bottom: 6px;">
          <option v-for="ip in ipHistory" :key="ip" :value="ip">{{ ip }}</option>
          <option value="__manual__">手动输入...</option>
        </select>
        <input v-if="backendIp === '__manual__'" v-model="manualIp" @change="onManualIpChange" placeholder="被控端IP，如 192.168.1.100" style="padding: 6px 16px; border-radius: 6px; border: 1px solid #888; font-size: 1rem; width: 240px; margin-top: 6px;" />
      </div>
      <div style="margin-top: 18px; display: flex; gap: 32px; justify-content: center; align-items: center;">
        <div style="color: #fff;">
          帧率: <input type="range" min="5" max="30" v-model.number="fps" style="vertical-align: middle; width: 120px;" />
          <span style="margin-left: 8px; color: #ffd700;">{{ fps }} FPS</span>
        </div>
        <div style="color: #fff;">
          画质: <input type="range" min="0.2" max="0.95" step="0.01" v-model.number="quality" style="vertical-align: middle; width: 120px;" />
          <span style="margin-left: 8px; color: #ffd700;">{{ quality }}</span>
        </div>
      </div>
    </div>
    <div style="background: #23272f; border-radius: 16px; box-shadow: 0 4px 32px #0006; padding: 32px 32px 24px 32px; min-width: 420px; max-width: 90vw; display: flex; flex-direction: column; align-items: center;">
      <WindowSelector :backend-ip="backendIp" @window-changed="onWindowChanged" />
      <StreamViewer ref="viewerRef" :backend-ip="backendIp" :fps="fps" :quality="quality" />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import WindowSelector from './components/WindowSelector.vue';
import StreamViewer from './components/StreamViewer.vue';

const backendIp = ref('localhost');
const manualIp = ref('');
const ipHistory = ref([]);
const fps = ref(24);
const quality = ref(0.7);
const viewerRef = ref(null);

onMounted(() => {
  const history = JSON.parse(localStorage.getItem('ip_history') || '[]');
  ipHistory.value = history.length ? history : ['localhost'];
  const savedIp = localStorage.getItem('remote_ip');
  if (savedIp && history.includes(savedIp)) {
    backendIp.value = savedIp;
  } else {
    backendIp.value = ipHistory.value[0];
  }
});

function saveIpToHistory(ip) {
  let history = JSON.parse(localStorage.getItem('ip_history') || '[]');
  if (!history.includes(ip)) {
    history.unshift(ip);
    if (history.length > 5) history = history.slice(0, 5);
    localStorage.setItem('ip_history', JSON.stringify(history));
  }
  localStorage.setItem('remote_ip', ip);
  ipHistory.value = history;
}

function onIpSelect() {
  if (backendIp.value !== '__manual__') {
    saveIpToHistory(backendIp.value);
  }
}

function onManualIpChange() {
  if (manualIp.value && manualIp.value !== '__manual__') {
    backendIp.value = manualIp.value;
    saveIpToHistory(manualIp.value);
  }
}

watch(backendIp, (val) => {
  if (val !== '__manual__') {
    manualIp.value = '';
  }
});

function onWindowChanged() {
  if (viewerRef.value && viewerRef.value.reconnect) {
    viewerRef.value.reconnect();
  }
}
</script> 